<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>VueComponent</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 
            关于VueComponent:
                1. school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的.
                2. 我们只需要写<school></school>,Vue解析时会帮我们创建school组件的实例对象,
                   即Vue帮我们执行的: new VueComponent(options)
                3. 特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!
                4. 关于this指向:
                    4.1 组件配置中:
                        data函数, methods中的函数, watch中的函数, computed中的函数,它们的this均是[VueComponent实例对象]
                    4.2 new Vue()配置中:
                        data函数, methods中的函数, watch中的函数, computed中的函数,它们的this均是[Vue实例对象]
                5. VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)
                    Vue的实例对象,以后简称vm.
         -->
        <div id="root">
            <school></school>
        </div>
     
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示
        
        // 第一步:定义学校组件
        const school = Vue.extend({
            name: 'school',
            template: `
                <div>
                    <h2>学校名称: {{name}}</h2>  
                    <h2>学校地址: {{addr}}</h2>    
                    <button @click='change'>修改地址为上海</button>
                </div>
            `,
            data(){
                return {
                    'name': '清华',
                    'addr': '北京'
                }
            },
            methods: {
                change: function() {
                    this.addr = '上海'
                }
            },
        })

        
        // 创建Vue实例，开端
        new Vue({
            el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            // 第二步:注册组件
            components: {
                school: school,
            }
        })
    </script>
</html>
